<template>
  <div class="container-box router-view">
    <LHeader />
    <transition :name="transitionName">
      <nuxt class="container" />
    </transition>
    <LFooter />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";

@Component({
  head() {
    return {
      titleTemplate: "刘洋博客 - 一个vue搭建的个人网站(www.itliuyang.com)",
    };
  },
})
export default class extends Vue {
  transitionName: string = "vux-pop-in";
  pathList: Array<any> = [];
  $nuxt: any;

  created() {}
  @Watch("$route", { immediate: true })
  private changeRouter(to: any, from: any) {
    this.$nextTick(() => {
      if (this.$nuxt.$loading) {
        this.$nuxt.$loading.start();
        setTimeout(() => this.$nuxt.$loading.finish(), 500);
      }
    });
    //   let routerisBack = false;
    //   if (this.pathList.includes(to.path)) {
    //     const index = this.pathList.findIndex(() => {
    //       return from.path;
    //     });
    //     this.pathList.splice(index, 1);
    //     routerisBack = true;
    //   } else {
    //     this.pathList.push(to.path);
    //     routerisBack = false;
    //   }

    //   if (to.path === "/start") {
    //     // 'start'为首页
    //     routerisBack = true;
    //     this.pathList = [];
    //   }
    //   let isBack = routerisBack;
    //   if (isBack) {
    //     this.transitionName = "vux-pop-in";
    //   } else {
    //     this.transitionName = "vux-pop-out";
    //   }

    //   routerisBack = false;

    //   // if (to.meta.index > from.meta.index) {
    //   //   this.transitionName = "vux-pop-in";
    //   // } else {
    //   //   this.transitionName = "vux-pop-out";
    //   // }
  }

  // watch: {
  //   $route(to, from) {
  //     if (to.meta.index > from.meta.index) {
  //       this.transitionName = "vux-pop-in";
  //     } else {
  //       this.transitionName = "vux-pop-out";
  //     }
  //   },
  // },
}
</script>
<style lang="scss">


.footer {
  background-color: #fff;
  display: flex;
  align-items: center;
}

.router-view {
  width: 100%;
  position: absolute;
  -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -moz-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -ms-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  height: 100%;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  // height: 100%;
  // position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(0, -5%, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(0, 5%, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(0, 5%, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(0, -5%, 0);
}
</style>
